<template>
	<modeBoxTemplate>
		<el-form :model="formData" :rules="rules" ref="ruleFormRef" label-position="top">
			<el-form-item prop="outputPath" label="输出路径">
				<path-input v-model="formData.outputPath" type="dir" placeholder="输出路径" tiele="选择输出路径" />
			</el-form-item>
			<el-form-item label="压缩选项">
				<el-select v-model="formData.compress" placeholder="压缩选项">
					<el-option label="不压缩" value="none" />
					<el-option label="zip" value="zip" />
					<el-option label="7z" value="7z" />
				</el-select>
			</el-form-item>
			<el-form-item label="下载网络图片">
				<el-switch v-model="formData.downloadImage" :disabled="!urlc" />
				<span class="url-disabled" v-if="!urlc">未在文档检测到网络图片</span>
			</el-form-item>
			<el-form-item label="输出为单文件">
				<el-switch v-model="formData.outputSingleFile" />
			</el-form-item>
		</el-form>
		<el-button type="primary" :disabled="workOngoing" @click="start">开始</el-button>
	</modeBoxTemplate>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { API } from '@v/utils/API';
import type { FormInstance } from 'element-plus';
import modeBoxTemplate from '../modeBoxTemplate.vue';
import { dirPathValidator } from '@v/utils/elementValidator';
import { rootMixin } from '@v/mixin';
import { Mode6Data } from '@p/main-modeData';
import { useRootStore } from '@v/store';
import pathInput from '@v/components/form/path-input.vue';

const store = useRootStore();

// 网络图片是否大于0
const urlc = computed(() => {
	if (store.fileInfo) {
		return store.fileInfo.imageCount.url > 0;
	}

	return false;
});

const { workOngoing } = rootMixin();

const formData = reactive<Mode6Data>({
	outputPath: '',
	downloadImage: false,
	outputSingleFile: false,
	compress: 'none',
});

const rules = {
	outputPath: [
		{
			validator: dirPathValidator('dir'),
			trigger: 'change',
		},
	],
};

const ruleFormRef = ref<FormInstance>();

function start() {
	if (!ruleFormRef.value) return;

	ruleFormRef.value.validate((valid) => {
		if (valid) {
			store.setWork(true, 'mode6');
			API.invoke('mode6', JSON.parse(JSON.stringify(formData)));
		}
	});
}
</script>

<style scoped lang="scss">
.url-disabled {
	font-size: 14px;
	margin-left: 10px;
	color: var(--theme-warning-color);
	opacity: 0.9;
}
</style>
